<template>
  <el-dropdown
    v-bind='$attrs'
    trigger='click'
    class='theme'
    @command='hangleSetTheme'
  >
<!--    图标-->
    <div>
      <el-tooltip :content='$t("msg.bavBar.themeChange")'>
        <svg-icon id="guide-theme" icon='change-theme'></svg-icon>
      </el-tooltip>
    </div>
<!--    menu-->
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command='color'>
          {{ $t('msg.theme.themeChange')}}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
<!--  弹出层-->
  <div>
    <select-color
      v-model='selectColorVisible'
    ></select-color>
  </div>
</template>

<script setup>
import SelectColor from './components/SelectColor.vue'
import { ref } from 'vue'

// dialog
const selectColorVisible = ref(false)

const hangleSetTheme = (command) => {
  selectColorVisible.value = true
}
</script>

<style lang='scss' scoped>

</style>
